.list {
  composes: center from 'styles/app';

  list-style: none;
  padding: 0;

  max-height: 300px;
  overflow: auto;

  transition: all 250ms ease;
  float: left;
}

.listDrop {
  composes: center from 'styles/app';

  list-style: none;
  padding: 0;

  max-height: 300px;
  overflow: auto;

  transition: all 250ms ease;
  list-style: none;
}

.item {
  min-width: 10px;
  max-width: 100px;
  font-size: 12px;

  position: relative;
  float: left;
  padding: 6px;
  padding-right: 20px;
  margin: 5px;
  margin-left: 0px;
  background-color: transparent;

  background-color: #f2f2f2;

  transition: all 250ms ease;

  &:hover {
    cursor: pointer;

    margin-left: 4px;
    background-color: #ebb428;

    .caption {
      color: #fff;
    }

    :global(.fa-remove) {
      color: #e02513;
    }
  }

  .actions {

    float: right;

    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0, -40%);

    i {
      position: relative;

      width: 20px;
      height: 20px;

      text-align: center;

      &:hover {
        cursor: pointer;
      }
    }
  }
  font-size: 12px;
}



.button {
  composes: tCenter from 'styles/app';
  display: block;
  box-sizing: border-box;

  width: 100%;
  padding: 12px;

  color: #fff;
  background-color: #961842;

  transition: all 250ms ease;

  &:hover {
    cursor: pointer;

    background-color: #d03117;
  }
}

.fl {
    float: left;
}
.input {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  outline: none;

  border: 1px solid #f2f2f2;
  transition: all 250ms ease;
  overflow: hidden;
  &:focus, &:active {
    border-color: #961842;
  }
}

.inputwarp  {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    outline: none;
    border: none;
    float: left;
    line-height: 35px;
}



.dropWarp {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    outline: none;
    border: 1px solid red;

    float: left;
    line-height: 35px;
}

.itemDrop {
    width: 100%;
  font-size: 18px;
  position: relative;
  padding: 0 12px;
  margin: 5px;
  margin-left: 0px;
  background-color: transparent;

  background-color: #f2f2f2;

  transition: all 250ms ease;

  &:hover {
    cursor: pointer;

    margin-left: 4px;
    background-color: #ebb428;

    .caption {
      color: #fff;
    }

    :global(.fa-remove) {
      color: #e02513;
    }
  }

  .actions {

    float: right;

    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(0, -40%);

    i {
      position: relative;

      width: 20px;
      height: 20px;

      text-align: center;

      &:hover {
        cursor: pointer;
      }
    }
  }
  font-size: 12px;
}
